<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <title>诚信分期</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/test/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/test/css/css.css">
</head>
<body>
<div class="swiper-container swiper-banner" id="banner">
    <div class="swiper-wrapper">
       <volist name="data['img']" id="voimg">
            <div class="swiper-slide">
                <img src="{$voimg}">
            </div>
        </volist>
    </div>
    <p class="swiper-detail">
        <span class="left">·{$data.base}</span>
        <span class="right">{$data.type}</span>
    </p>
    <div class="swiper-pagination"></div>
</div>
<div class="main">
    <div class="title">
        <h1 class="flex">
            <span class="left flex-child h1-title">
                {$data.name}
            </span>
            <span class="right share-icon" id="share">
                分享
            </span>
        </h1>
        <p class="title-detail">&yen;<strong>2000</strong>起/人<span class="tag">限时促销</span></p>
        <p>该商品最高可享12期免息分期</p>
        <p class="hint">购买旅游产品，享受可用额度翻倍</p>
    </div>
</div>
<div class="main content-intro">
    <ul>
        <li>出发城市<span>{$data.base}出发</span></li>
        <li>出游天数<span>{$data.day}</span></li>
        <li>交通方式<span>{$data.traffic}</span></li>
        <li>签证状态<span>
        <if condition="$data['is_visa'] eq 1 ">需要签证
        <else /> 不需要签证</if>
        </span></li>
        <li>产品编号<span>{$data.travel_no}</span></li>
    </ul>
</div>
<div id="nav-none"></div>
<div class=" content" id="nav">
    <div class="swiper-container swiper-container-horizontal" id="swiper-container2">
        <div class="swiper-wrapper swiper-title">
            <a class="swiper-slide  active-nav" href="#box_1">
                费用信息
            </a>
            <a class="swiper-slide " href="#box_2">
                路程特色
            </a>
            <a class="swiper-slide " href="#box_3">
                旅行日程
            </a>
            <a class="swiper-slide swiper-slide-prev " href="#box_4">
                预定须知
            </a>
        </div>
    </div>
</div>
<div class="main swiper-slide-box" id="box_1">
    <h2>费用包含</h2>
     {$data.Series}
</div>
<div class="main" id="box_2">
    <h2>路线特色</h2>
    <volist name="data['special']" id="vosp">
    <p>
        {$vosp}
    </p>
</volist>
</div>
<div class="main project" id="box_3">
    <h2>旅行日程</h2>
    <ul>
        <volist name="data['Travel']" id="votral">
        <li class="project-list">
            <div class="right ">
                <p class="project-title"><strong>第{$votral.travel_time}天</strong> {$votral.travel}</p>
                <div class="project-detail">
                    <p class="project-more eat">餐饮<span>{$votral.food}</span></p>
                    <p class="project-more home">住宿<span>{$votral.stay}</span></p>
                    <p class="text-index">
                       {$votral.detail}
                    </p>
                </div>
            </div>
        </li>
        </volist>
        <li class="flex">
            <div class="left">
                旅行结束
            </div>
        </li>
        </li>
    </ul>
</div>
<div class="main project" id="box_4">
    <h2>预定须知</h2>
    {$data.notice}
</div>

<div class="top">
    <a href="#"></a>
</div>
<!--<footer>-->
<!--<button>打开爱趣分期，查看出游详情</button>-->
<!--</footer>-->
<script src="__PUBLIC__/test/javascript/swiper.min.js"></script>
<script src="__PUBLIC__/test/javascript/zepto.js"></script>
<script>
    var mySwiper = new Swiper('#banner', {
        autoplay: 50000,//可选选项，自动滑动
        pagination: '.swiper-pagination',
        paginationType: 'bullets',
        loop: true
    });
    //图片高度固定（兼容）
    (function () {
        var width = document.body.offsetWidth;
        document.getElementById('banner').style.height = width * 9 / 16 + 'px';
    })();
    //    var mySwiper2 = new Swiper('#swiper-container2', {
    //        watchSlidesProgress: true,
    //        watchSlidesVisibility: true,
    //        slidesPerView: 0,
    //        onTap: function () {
    //            mySwiper3.slideTo(mySwiper2.clickedIndex)
    //        }
    //    });
    //    var mySwiper3 = new Swiper('#swiper-container3', {
    //        onSlideChangeStart: function () {
    //            updateNavPosition()
    //        }
    //    });

    function updateNavPosition() {
        $('#swiper-container2 .active-nav').removeClass('active-nav');
        var height = $('#swiper-container3 .swiper-slide-active .swiper-slide-box').height();
        $('#swiper-container3').css('height', height + 'px');
        console.log(height);
        var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);
            if (activeNav.index() > mySwiper2.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(mySwiper2.width / activeNav.width()) - 1;
                mySwiper2.slideTo(activeNav.index() - thumbsPerNav)
            }
            else {
                console.log(3);
                mySwiper2.slideTo(activeNav.index())
            }
        }
        function active() {

        }
    }
    //    分享
    $('#share').on('click', function () {
//        console.log('1');
    });
    //图片点击弹出
    $('#alert').click(function () {
        this.parentNode.removeChild(this);
    });
    //图片隐藏
    $('.img').click(function () {
        var div = document.createElement('div');
        div.id = 'alert';
        div.className = "alert";
        console.log(this);
        var src = this.src;
        div.innerHTML = ' <img src="' + src + '">';
        this.parentNode.appendChild(div);
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
        $('#alert').click(function () {
            document.getElementsByTagName('body')[0].style.overflow = 'auto';
            this.parentNode.removeChild(this);
        });
    });
    (function () {
        //滚动监听
        var mTop = document.getElementById("nav").offsetTop;
        var box_1 = document.getElementById("box_1").offsetTop;
        var box_2 = document.getElementById("box_2").offsetTop;
        var box_3 = document.getElementById("box_3").offsetTop;
        var box_4 = document.getElementById("box_4").offsetTop;

        window.onscroll = function () {
//变量t就是滚动条滚动时，到顶部的距离
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            var left = document.getElementById("nav");
            if (t >= mTop) {     //当拖动到距离顶部100px处时，左边导航固定，不随滚动条滚动
                left.style.position = "fixed";
                $('#nav-none').css('height','4rem');
                left.style.top = "0";
                $('#swiper-container2 .active-nav').removeClass('active-nav');
                if ( t < (box_2-100)) {
                    $('#swiper-container2 .swiper-slide').eq(0).addClass('active-nav');
                } else if ((box_2-100) <= t && t < (box_3-100)) {
                    $('#swiper-container2 .swiper-slide').eq(1).addClass('active-nav');
                } else if ((box_3-100) <=t && t < (box_4-100)) {
                    $('#swiper-container2 .swiper-slide').eq(2).addClass('active-nav');
                } else {
                    $('#swiper-container2 .swiper-slide').eq(3).addClass('active-nav');
                }
            } else {
                //恢复正常
                left.style.position = "relative";
                $('#nav-none').css('height','0');
                left.style.top = "0";
            }
        }
    })()

    //查看是否安装诚信分期
    //    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    //        var loadDateTime = new Date();
    //        window.setTimeout(function () {
    //                    var timeOutDateTime = new Date();
    //                    if (timeOutDateTime - loadDateTime < 5000) {
    ////                        window.location = "要跳转的页面URL";
    //                    } else {
    ////                        window.close();
    //                    }
    //                },
    //                25);
    //        window.location = " apps custom url schemes ";
    //    } else if (navigator.userAgent.match(/android/i)) {
    //        var state = null;
    //        try {
    //            state = window.open("apps custom url schemes ", '_blank');
    //        } catch (e) {
    //        }
    //        if (state) {
    //            window.close();
    //        } else {
    ////            window.location = "要跳转的页面URL";
    //        }
    //    }

</script>
</body>
</html>